import React, { useEffect, useState } from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { View, StyleSheet, TouchableOpacity, AppState, Text} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import HomeView from "../pages/HomeView/HomeView";
import SquareView from "../pages/SquareView/SquareView";
import MineView from "../pages/MineView/MineView";
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { faHome, faSquare, faUser } from '@fortawesome/free-solid-svg-icons';
import Theme from "../utils/theme";
import StorageUtil from "../utils/StorageUtil";
const Tab = createBottomTabNavigator();

// 定义Tabbar颜色
const TABBAR_COLORS = {
    active: Theme.colors.primary.main,      // 选中状态：主题蓝色
    inactive: Theme.colors.neutral.gray[500], // 未选中状态：中性灰色
    background: Theme.colors.background.primary, // 背景：白色
    border: Theme.colors.border.light,      // 边框：浅灰色
};

function TabbarUI({
    state, descriptors, navigation
}) {
    
    return <SafeAreaView style={styles.tabBar} edges={['bottom']}>
        {state.routes.map((route, index)=>{
            const {options} = descriptors[route.key];
            const isFocused = state.index === index;
            const label = options.tabBarLabel
            typeof options.tabBarLabel !== 'undefined'
                ? options.tabBarLabel
                : typeof options.title !== 'undefined'
                ? options.title
                : route.name;
            const onPress = async ()=>{
                const event = navigation.emit({
                    type: 'tabPress',
                    target: route.key
                })
                if (!isFocused && !event.defaultPrevented) {
                    navigation.navigate(route.name)
                }
            }
            return <View key={index} style={styles.tabBarItem}>
            <TouchableOpacity 
                activeOpacity={0.7} 
                onPress={onPress} 
                style={[styles.tabBarButton, isFocused && styles.tabBarButtonActive]}
            >
                {isFocused ? options.icon_s : options.icon}
                <Text style={[
                    styles.tabBarLabel,
                    {
                        color: isFocused ? TABBAR_COLORS.active : TABBAR_COLORS.inactive,
                        fontWeight: isFocused ? '600' : '400'
                    }
                ]}>{label}</Text>
            </TouchableOpacity>
        </View>
        })}
    </SafeAreaView>
}

export default function Tabbar() {

    return <><Tab.Navigator initialRouteName="HomeView" tabBar={ props => {
        return <TabbarUI {...props}/>
    }}>
        <Tab.Screen name="HomeView" component={HomeView} options={{
            headerShown: false,
            tabBarLabel: '首页',
            icon: <FontAwesomeIcon icon={faHome} size={22} color={TABBAR_COLORS.inactive} />,
            icon_s: <FontAwesomeIcon icon={faHome} size={22} color={TABBAR_COLORS.active} />,
        }}/>
        <Tab.Screen name="SquareView" component={SquareView} options={{
            headerShown: false,
            tabBarLabel: '广场',
            icon: <FontAwesomeIcon icon={faSquare} size={22} color={TABBAR_COLORS.inactive} />,
            icon_s: <FontAwesomeIcon icon={faSquare} size={22} color={TABBAR_COLORS.active} />,
        }}/>
        <Tab.Screen name="MineView" component={MineView} options={{
            headerShown: false,
            tabBarLabel: '我的',
            icon: <FontAwesomeIcon icon={faUser} size={20} color={TABBAR_COLORS.inactive} />,
            icon_s: <FontAwesomeIcon icon={faUser} size={20} color={TABBAR_COLORS.active} />,
        }}/>
    </Tab.Navigator>
    </>

}

const styles = StyleSheet.create({
    tabBar: {
        backgroundColor: TABBAR_COLORS.background,
        paddingTop: 8,
        paddingBottom: 4,
        borderTopWidth: 0.5,
        borderTopColor: TABBAR_COLORS.border,
        elevation: 8,
        shadowColor: '#000',
        shadowOffset: {
            width: 0,
            height: -2,
        },
        shadowOpacity: 0.1,
        shadowRadius: 4,
        flexDirection: "row",
    },
    tabBarItem: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
    },
    tabBarButton: {
        alignItems: 'center',
        justifyContent: 'center',
        paddingVertical: 6,
        paddingHorizontal: 12,
        borderRadius: 12,
        minHeight: 50,
        transition: 'all 0.2s ease',
    },
    tabBarButtonActive: {
        backgroundColor: `${TABBAR_COLORS.active}08`, // 8% 透明度的主题色背景
        transform: [{ scale: 1.05 }],
    },
    tabBarLabel: {
        fontSize: 12,
        marginTop: 4,
        textAlign: 'center',
        letterSpacing: 0.5,
    }
});